<template>
	<view class="ans-list">
		<tn-navbar fixed>
			<template #back>
				<view class="flex-center" @click="goBack">
					<tn-icon name="left"/>
				</view>
			</template>
			已答问卷列表
		</tn-navbar>
		<view class="wallpaper"></view>
		<view class="container">
			<scroll-view scroll-y @scrolltolower="scrolltolower" class="list-scroll">
				<view class="list">
					<!--查看用户列表-->
					<template v-if="isUserList">
						<view class="list-block" hover-class="hoverList" v-for="(item,index) in userArr" :key="index"
						      @click="checkQuesList(item)">
							<view class="list-block__left">
								<view class="name">{{ item }}的问卷</view>
							</view>
						</view>
					</template>
					<!--具体用户的列表-->
					<template v-else>
						<view class="list-block" hover-class="hoverList" v-for="(item,index) in quesList" :key="index"
						      @click="checkDetail(item)">
							<view class="list-block__left">
								<view class="name">{{ item.name }}</view>
								<view class="desc">
									{{ item.userInfo?.name }} {{ item.userInfo?.sex }} {{ item.userInfo?.age }}岁
								</view>
							</view>
						</view>
					</template>
				
				</view>
			</scroll-view>
		</view>
		
		<tn-popup v-model="showPopup" open-direction="bottom">
			<view class="popup-content">
				<view class="ques-title">{{ currInfo.name }}</view>
				<view class="list mb40 mt20" v-for="(item,index) in currInfo.value" :key="index">
					<view class="title">{{ index + 1 }}、{{ item.label }}</view>
					<view class="value mt10">{{ item.value }}</view>
				</view>
				<view class="btn mt20">
					<tn-button width="100%" height="60" @click="checkImg">查看该用户《知情同意书》</tn-button>
				</view>
			</view>
		</tn-popup>
		
		<tn-popup v-model="showImg">
			<view class="popup-content">
				<image :src="img" class="img" mode="widthFix"/>
			</view>
		</tn-popup>
		
		
		<page-loading :loading="showLoading"/>
	</view>
</template>

<script setup lang="ts">
import {computed, reactive, ref} from "vue";
import {onLoad} from "@dcloudio/uni-app";
import PageLoading from "@/components/PageLoading.vue";

let pageNums = ref(1);
let list = ref<any>([]);
let showPopup = ref(false);
let currInfo = reactive<Record<string, any>>({});
let showImg = ref(false);
let img = ref("");
let userArr = ref([]);
let isUserList = ref(true);
let quesList = ref<Array<Record<string, any>>>([]);
let showLoading = ref(false);


const getLists = () => {
	showLoading.value = true;
	uniCloud.callFunction({
		name: "all-questionnaire",
		data: {
			pageSize: 100,
			pageCurrent: pageNums.value
		}
	}).then((res: any) => {
		if (res?.result?.code === 200) {
			let data = JSON.parse(res.result.data);
			if (!data || data.length === 0) {
				uni.showToast({
					title: "已经没有更多数据了",
					icon: "none"
				});
				return;
			}
			list.value = [...list.value, ...data];
			
			if (!list.value || list.value.length == 0) return;
			// 筛选出不同的用户
			for (let i of list.value) {
				userArr.value.push(i.userInfo?.name);
			}
			//去重
			userArr.value = Array.from(new Set(userArr.value));
			
		} else {
			uni.showToast({
				title: "获取列表出现错误",
				icon: "error"
			});
		}
		showLoading.value = false;
	});
};
const scrolltolower = () => {
	if (!isUserList.value) return;
	pageNums.value++;
	getLists();
};
const checkDetail = (item: Record<string, any>) => {
	Object.assign(currInfo, item);
	showPopup.value = true;
	console.log(currInfo);
};
const checkImg = () => {
	img.value = currInfo.contract;
	showImg.value = true;
};
const checkQuesList = (name: string) => {
	quesList.value = list.value.filter((item: any) => {
		return item.userInfo?.name === name;
	});
	isUserList.value = false;
};
const goBack = () => {
	if (!isUserList.value) {
		isUserList.value = !isUserList.value;
	} else {
		uni.navigateBack();
	}
};

onLoad(() => {
	getLists();
});
</script>

<style lang="scss">
.ans-list {
	.wallpaper {
		width: 100%;
		height: 100vh;
		position: fixed;
		background-color: #2DCA8D;
	}
	
	.container {
		padding: 20rpx 0;
		position: relative;
		
		.list-scroll {
			height: calc(100vh - 40rpx);
			overflow: auto;
		}
		
		.list {
			padding: 0 20rpx;
			
			&-block {
				padding: 20rpx;
				margin-bottom: 20rpx;
				background: #FFFFFF;
				border-radius: 10rpx;
				box-shadow: 36px 36px 80px rgba(0, 0, 0, 0.07);
				color: #333333;
				font-size: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.name {
					font-weight: 600;
					font-size: 36rpx;
				}
				
				.desc {
					color: #999999;
					margin-top: 10rpx;
				}
			}
		}
		
		.hoverList {
			background: #ececec !important;
		}
	}
	
	.popup-content {
		padding: 40rpx;
		max-height: 85vh;
		overflow: auto;
		
		.ques-title {
			font-weight: 500;
			font-size: 40rpx;
			text-align: center;
		}
		
		.list {
			font-size: 30rpx;
			
			.title {
				color: #333333;
				font-weight: 500;
			}
			
			.value {
				color: #999999;
			}
		}
	}
	
	.img {
		width: 100vw;
		height: 90vh;
	}
	
	.flex-center {
		height: 100%;
		display: flex;
		align-items: center;
	}
}
</style>
